import React, { CSSProperties } from 'react'
import CommonNav from '../../components/CommonNav/CommonNav'
import { RouteComponentProps,withRouter } from 'react-router'
import DetailSwiper from './DetailSwiper/DetailSwiper'
import TitleInfo from './TitleInfo/TitleInfo'
import TakeNum from './TakeNum/TakeNum'
import Vender from './Vender/Vender'
import CartFooter from './CartFooter/CartFooter'
interface IProps extends RouteComponentProps {
}
const DetailStyle: CSSProperties = {
    minHeight: '100vh',
    zIndex: 99,
    paddingTop: '9vh',
    backgroundColor: 'rgb(247,247,247)',
    paddingBottom: '56px'
}
const GoodsDetail = (props: IProps) => {
    let itemInfo: any
    if(!props.location.state) {
        itemInfo = ''
        props.history.push('/home')
    }
    else itemInfo = (props.location.state as any).itemInfo
    React.useEffect(() => {
        // 每次挂载是滚动到顶部
        window.scrollTo(0,0)
    },[])
    return (
        <>
        {
            itemInfo ? (
                < >
                <CommonNav  isBack={true} text={'商品'}/>
                <div style={DetailStyle}>
                    <DetailSwiper imgs={itemInfo.gimgs}/>
                    <TitleInfo data={{
                        gsize: itemInfo.gsize,
                        gcolor: itemInfo.gcolor,
                        gmethod: itemInfo.gmethod,
                        gname: itemInfo.gname,
                        gdesc: itemInfo.gdesc
                    }}/>
                    <TakeNum />
                    <Vender gvender={itemInfo.gvender} gvenderImg={itemInfo.gvenderImg} gvenderdesc={itemInfo.gvenderdesc}/>
                </div>
                <CartFooter 
                    goodId={itemInfo.goodId}
                    goodMethod={itemInfo.gmethod}
                    goodcover={itemInfo.gcover}
                    goodName={itemInfo.gname}
                />
            </>
            ) : (<></>)
        }
        </>
    )
}

export default withRouter(GoodsDetail)